<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>商品列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="productList-body">
			<div class="body-header">
				<div style="margin-right: 10px"><span>商品编码:&nbsp;</span> <el-input v-model="pageData.goodNum" placeholder="请输入商品编码" size="small" style="width: 200px;"></el-input></div>
				<div style="margin-right: 10px"><span>商品名称:&nbsp;</span> <el-input v-model="pageData.name" placeholder="请输入商品名称" size="small" style="width: 200px;"></el-input></div>
				<div style="margin-right: 10px">
					<span>商品状态:&nbsp;</span>
					<el-select placeholder="请选择来源" v-model="pageData.status" @change="change" style="width: 200px" size="small">
						<el-option
								v-for="item in statusData"
								:key="item.id"
								:label="item.label"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div style="margin-right: 10px"><el-button type="info" icon="el-icon-search" size="small" @click="searchList">搜 索</el-button></div>
				<div style="margin-right: 10px"><el-button icon="el-icon-refresh-right" size="small" @click="resetList">重 置</el-button></div>
				<div style="margin-right: 10px"><el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog = true">添 加</el-button></div>
				
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="goodNum"
							label="商品编码">
					</el-table-column>
					<el-table-column
							align="center"
							prop="name"
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							label="商品图片">
						<template slot-scope="scope">
							<img :src="scope.row.goodUrl" style="width: 100px;height: 100px"> </img>
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="price"
							label="销售价格(元)">
					</el-table-column>
					<el-table-column
							align="center"
							prop="brandName"
							label="品牌名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="goodAttribute"
							label="商品属性">
					</el-table-column>
					<el-table-column
							align="center"
							prop="totalNum"
							label="库存(件)">
					</el-table-column>
					
					<el-table-column
							align="center"
							label="商品状态">
						<template slot-scope="scope">
							<el-tag :type="scope.row.status === 1? '' : 'danger' ">{{scope.row.status === 1? '在售' : '未售'}}</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button type="warning " size="mini" @click="openEdit(scope.row.id)">编 辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
<!--		新增的弹框-->
		<el-dialog
				title = "商品添加"
				:visible.sync = "addDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "100px" >
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="addFormData.goodNum" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="品牌名称:" prop="name">
						<el-input  placeholder="请输入品牌名称" v-model="addFormData.brandName" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称" v-model="addFormData.name"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品属性:" >
						<el-input  placeholder="请输入商品属性" v-model="addFormData.goodAttribute" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="销售价格:" >
						<el-input  placeholder="请输入销售价格" v-model="addFormData.price" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="库存数量:" >
						<el-input  placeholder="请输入库存数量" v-model="addFormData.totalNum" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品状态:"  >
						<el-select placeholder="请选择状态" v-model="addFormData.status"  style="width: 200px" size="small">
							<el-option
									v-for="item in statusList"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品图片:" >
						<el-upload
								class="avatar-uploader"
								:action= uploadUrl
								:show-file-list="false"
								:headers = myHeaders
								:on-success="success"
								:before-upload="before">
							<img v-if="addFormData.goodUrl" :src="addFormData.goodUrl" style="width: 100px;height: 100px" class="avatar">
							<i v-else class="el-icon-plus" style="font-size: 28px;color: #8c939d;width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px dashed #ccc"></i>
						</el-upload>
						
					</el-form-item>
					
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "addDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "subNewGoods()"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
<!--		编辑的弹窗-->
		<el-dialog
				title = "商品编辑"
				:visible.sync = "editDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "100px" >
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="editFormData.goodNum" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="品牌名称:" prop="name">
						<el-input  placeholder="请输入品牌名称" v-model="editFormData.brandName" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称" v-model="editFormData.name"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品属性:" >
						<el-input  placeholder="请输入商品属性" v-model="editFormData.goodAttribute" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="销售价格:" >
						<el-input  placeholder="请输入销售价格" v-model="editFormData.price" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="库存数量:" >
						<el-input  placeholder="请输入库存数量" v-model="editFormData.totalNum" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="商品状态:"  >
						<el-select placeholder="请选择状态" v-model="editFormData.status"  style="width: 200px" size="small">
							<el-option
									v-for="item in statusList"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品图片:" >
						<el-upload
								class="avatar-uploader"
								:action= uploadUrl
								:show-file-list="false"
								:headers = myHeaders
								:on-success="successEdit"
								:before-upload="before">
							<img v-if="editFormData.goodUrl" :src="editFormData.goodUrl" style="width: 100px;height: 100px" class="avatar">
							<i v-else class="el-icon-plus" style="font-size: 28px;color: #8c939d;width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px dashed #ccc"></i>
						</el-upload>
					
					</el-form-item>
				
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "editDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "subEditGoods"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
	</div>
</template >

<script >
	import common from "../utils/common";
	import { commodityPage ,commodityAdd, commodityEdit, commodityById} from "../api/commodityModules";

    export default {
        name: "productList",
        data(){
            return{
                myHeaders: {
                    token: ''
                },
                uploadUrl: common.requestUrl + '/upload/uploadImage',
                addDialog:false,
				editDialog:false,
                pageData:{
                    name: '',
					goodNum:'',
					status:null,
                    pageIndex: 1,
                    pageSize: 4
				},
                statusData:[
                    {
                        id: null,
                        label: '全部'
                    },
                    {
                        id: 1,
                        label: '在售'
                    },
                    {
                        id: 0,
                        label: '未在售'
                    }
                ],
                statusList:[
                    {
                        id: 1,
                        label: '在售'
                    },
                    {
                        id: 0,
                        label: '未售'
                    }
                ],
                tableData: [],
				total:null,
				addFormData:{
                    brandName: "",
                    goodAttribute: "",
                    goodNum: "",
                    goodUrl: "",
                    name: "",
                    price: null,
                    status: null,
                    totalNum: null
				},
				editFormData:{}
            }
        },
		mounted() {
            this.myHeaders.token = sessionStorage.getItem('token')
            this.getPage()
        },
        methods:{
            //查询分页
            async getPage() {
                const { data } = await commodityPage(this.pageData)
				if (data.code === 200) {
				    this.tableData = data.data.data
					this.total = data.data.total
				}
			},
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//下拉框
            change(){
                this.getPage()
			},
			//搜索列表
			searchList(){
                this.getPage()
			},
			//重置列表
			resetList(){
               	this.pageData.name = ''
				this.pageData.status = null
				this.pageData.goodNum = ''
				this.getPage()
			},
			//商品图片上传成功
            success(res, file) {
                this.addFormData.goodUrl = res.data
                console.log(res)
                console.log(file)
            },
			//上传图片之前
            before(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('商品图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传商品图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
			//新增商品
            async subNewGoods(){
                for (let key in this.addFormData) {
                    if(this.addFormData[key] === null || this.addFormData[key] === '' ){
                        return this.$message.error('请将参数填写完整!!!')
                    }
                }
                const { data } = await commodityAdd(this.addFormData)
				if (data.code === 200) {
				    this.$message.success(data.message)
					this.addDialog = false
					this.addFormData = {}
					await this.getPage()
				}
			},
			//打开编辑商品弹框
            async openEdit(id){
                const { data } = await commodityById(id)
				if (data.code === 200) {
				    this.editFormData = data.data
					this.editDialog = true
				}
			},
			//编辑上传图片
            successEdit(res, file){
                this.editFormData.goodUrl = res.data
                console.log(res)
                console.log(file)
			},
			//编辑商品
            async subEditGoods(){
                for (let key in this.editFormData) {
                    if(this.editFormData[key] === null || this.editFormData[key] === '' ){
                        return this.$message.error('请将参数填写完整!!!')
                    }
                }
                const { data } = await commodityEdit(this.editFormData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.editDialog = false
                    await this.getPage()
                }
			}
		}
    }
</script >

<style scoped lang="less">
	.productList-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		/deep/.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9 !important;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		/deep/.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		/deep/.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style >
